<template>
  <div class="confirm-popover">
    <el-popover :icon="icon"
                :content="content"
                :trigger="trigger"
                :placement="placement"
                :width="width"
                v-model="visible">
      <span :class="{'el-icon-question' : icon}">{{content}}</span>
      <div style="text-align: right; margin: 0">
        <el-button type="text" size="mini" @click="visible = false">
          取消
        </el-button>
        <el-button type="danger" size="mini" @click="confirm()">确定</el-button>
      </div>
      <div slot="reference" id="reference"><slot></slot></div>
    </el-popover>
  </div>
</template>

<script>
export default {
  name: "Popover",
  props: {
    content: {
      type: String,
      default: '确认此操作？'
    },
    trigger: {
      type: String,
      default: 'click'
    },
    placement: {
      type: String,
      default: 'bottom'
    },
    width: {
      // eslint-disable-next-line vue/require-prop-type-constructor
      type: String | Number,
      default: 150
    },
    icon: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      visible: false
    }
  },
  methods: {
    confirm(params) {
      this.$emit('del', params);
      this.visible = false
    }
  }
}
</script>

<style scoped lang="less">

.confirm-popover, #reference {
  display: inline;
}

.el-icon-question:before {
  font-size: 16px;
  margin-right: 2px;
  color: orange;
}


</style>
